<template>
  <div id="slidebar">
    <a-menu
      v-if="AgentType == 'AGENT_MANAGER'"
      style="margin-top: 15px; background: #fafbff"
      :openKeys="openKeys"
      @openChange="onOpenChange"
      :defaultSelectedKeys="['1']"
      mode="inline"
      @click="routerGo"
    >
      <a-menu-item class="first_item" key="99">
        <i class="icon_title icon_m1"></i>
        <span class="side_title">账户首页</span>
      </a-menu-item>

      <a-sub-menu @titleClick="titleClick" key="sub98">
        <span slot="title" class="menu_item">
          <i class="icon_title icon_m4"></i>
          <span class="side_title">合作机构管理</span>
        </span>
        <a-menu-item class="menu_item_son" key="98">
          <i class="icon_title_son icon_m5"></i>
          合作机构新增
        </a-menu-item>
        <a-menu-item class="menu_item_son" key="97">
          <i class="icon_title_son icon_m5"></i>
          合作机构审核查询
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
    <a-menu
      v-if="AgentType != 'AGENT_MANAGER'"
      style="margin-top: 15px; background: #fafbff"
      :openKeys="openKeys"
      @openChange="onOpenChange"
      :defaultSelectedKeys="['1']"
      mode="inline"
      @click="routerGo"
    >
      <a-menu-item class="first_item" key="1">
        <i class="icon_title icon_m1"></i>
        <span class="side_title">账户首页</span>
      </a-menu-item>

      <a-sub-menu @titleClick="titleClick" key="sub5">
        <span slot="title" class="menu_item">
          <i class="icon_title icon_m4"></i>
          <span class="side_title">商户管理</span>
        </span>
        <a-menu-item class="menu_item_son" key="16">
          <i class="icon_title_son icon_m5"></i>
          商户入网申请
        </a-menu-item>
        <a-menu-item class="menu_item_son" key="17">
          <i class="icon_title_son icon_m5"></i>
          商户审核查询
        </a-menu-item>
        <a-menu-item class="menu_item_son" key="18">
          <i class="icon_title_son icon_m5"></i>
          商户信息查询
        </a-menu-item>
      </a-sub-menu>

      <a-sub-menu @titleClick="titleClick" key="sub6">
        <span slot="title" class="menu_item">
          <i class="icon_title icon_m4"></i>
          <span class="side_title">商户终端</span>
        </span>
        <a-menu-item class="menu_item_son" key="19">
          <i class="icon_title_son icon_m5"></i>
          商户新增终端
        </a-menu-item>
        <a-menu-item class="menu_item_son" key="20">
          <i class="icon_title_son icon_m5"></i>
          终端审核查询
        </a-menu-item>
        <a-menu-item class="menu_item_son" key="21">
          <i class="icon_title_son icon_m5"></i>
          终端信息查询
        </a-menu-item>
      </a-sub-menu>

      <a-sub-menu @titleClick="titleClick" key="sub8">
        <span slot="title" class="menu_item">
          <i class="icon_title icon_m4"></i>
          <span class="side_title">合作机构管理</span>
        </span>
        <a-menu-item class="menu_item_son" key="26">
          <i class="icon_title_son icon_m5"></i>
          合作机构新增
        </a-menu-item>
        <a-menu-item class="menu_item_son" key="27">
          <i class="icon_title_son icon_m5"></i>
          合作机构审核查询
        </a-menu-item>
        <a-menu-item class="menu_item_son" key="28">
          <i class="icon_title_son icon_m5"></i>
          合作机构信息查询
        </a-menu-item>
      </a-sub-menu>

      <a-sub-menu @titleClick="titleClick" key="sub7">
        <span slot="title" class="menu_item">
          <i class="icon_title icon_m4"></i>
          <span class="side_title">合作机构终端</span>
        </span>
        <a-menu-item class="menu_item_son" key="22">
          <i class="icon_title_son icon_m5"></i>
          终端查询
        </a-menu-item>
        <!-- <a-menu-item class="menu_item_son" key="23">
          <i class="icon_title_son icon_m5"></i>
          终端入库
        </a-menu-item> -->
        <a-menu-item class="menu_item_son" key="24">
          <i class="icon_title_son icon_m5"></i>
          终端划拨
        </a-menu-item>
        <a-menu-item class="menu_item_son" key="25">
          <i class="icon_title_son icon_m5"></i>
          终端回调
        </a-menu-item>
        <a-menu-item class="menu_item_son" key="31">
          <i class="icon_title_son icon_m5"></i>
          上级记录查询
        </a-menu-item>
      </a-sub-menu>

      <a-sub-menu key="sub1" @titleClick="titleClick">
        <span slot="title" class="menu_item">
          <i class="icon_title icon_m2"></i>
          <span class="side_title">交易管理</span>
        </span>
        <a-menu-item class="menu_item_son" key="2">
          <i class="icon_title_son icon_m5"></i>
          交易明细查询
        </a-menu-item>
        <!-- <a-menu-item class="menu_item_son" key="3">
          <i class="icon_title_son icon_m5"></i>
          提现明细查询
        </a-menu-item>
        <a-menu-item class="menu_item_son" key="4">
          <i class="icon_title_son icon_m6"></i>
          代付明细查询
        </a-menu-item> -->
        <!-- <a-menu-item class="menu_item_son" key="5">
          <i class="icon_title_son icon_m7"></i>
          费率查询
        </a-menu-item>
        <a-menu-item class="menu_item_son" key="6">
          <i class="icon_title_son icon_m8"></i>
          限额查询
        </a-menu-item> -->
      </a-sub-menu>
      <a-sub-menu key="sub11" @titleClick="titleClick">
        <span slot="title" class="menu_item">
          <i class="icon_title icon_m2"></i>
          <span class="side_title">活动管理</span>
        </span>
        <a-menu-item class="menu_item_son" key="/activities/returnMoney">
          <i class="icon_title_son icon_m5"></i>
          活动返现查询
        </a-menu-item>
        <a-menu-item class="menu_item_son" key="37">
          <i class="icon_title_son icon_m5"></i>
          活动扣款查询
        </a-menu-item>
         <a-menu-item class="menu_item_son" key="/activities/returnMoneyDownload">
          <i class="icon_title_son icon_m5"></i>
          返现明细下载
        </a-menu-item>
        <a-menu-item class="menu_item_son" key="38">
          <i class="icon_title_son icon_m5"></i>
          扣款明细下载
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub12" @titleClick="titleClick">
        <span slot="title" class="menu_item">
          <i class="icon_title icon_m2"></i>
          <span class="side_title">风控管理</span>
        </span>
        <a-menu-item class="menu_item_son" key="39">
          <i class="icon_title_son icon_m5"></i>
          风险扣款查询
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu @titleClick="titleClick" key="sub3">
        <span slot="title" class="menu_item">
          <i class="icon_title icon_m4"></i>
          <span class="side_title">分润管理</span>
        </span>
        <a-menu-item class="menu_item_son" key="36">
          <i class="icon_title_son icon_m10"></i>
          交易分润明细查询
        </a-menu-item>
        <a-menu-item class="menu_item_son" key="14">
          <i class="icon_title_son icon_m10"></i>
          交易分润明细下载
        </a-menu-item>
        <!-- <a-menu-item class="menu_item_son" key="15">
          <i class="icon_title_son icon_m12"></i>
          提现分润明细下载
        </a-menu-item> -->
      </a-sub-menu>

      <a-sub-menu key="sub2" @titleClick="titleClick">
        <span slot="title" class="menu_item">
          <i class="icon_title icon_m3"></i>
          <span class="side_title">账务管理</span>
        </span>
        <a-menu-item class="menu_item_son" key="7">
          <i class="icon_title_son icon_m9"></i>
          账务明细查询
        </a-menu-item>
      </a-sub-menu>

      <a-sub-menu @titleClick="titleClick" key="sub9">
        <span slot="title" class="menu_item">
          <i class="icon_title icon_m4"></i>
          <span class="side_title">业务管理</span>
        </span>
        <a-menu-item class="menu_item_son" key="29">
          <i class="icon_title_son icon_m5"></i>
          费率模板管理
        </a-menu-item>
        <a-menu-item class="menu_item_son" key="30">
          <i class="icon_title_son icon_m7"></i>
          费率查询
        </a-menu-item>

        <!-- <a-menu-item class="menu_item_son" key="31">
          <i class="icon_title_son icon_m8"></i>
          限额查询
        </a-menu-item> -->
      </a-sub-menu>

      <a-sub-menu key="sub4" @titleClick="titleClick">
        <span slot="title" class="menu_item">
          <i class="icon_title icon_m4"></i>
          <span class="side_title">账户管理</span>
        </span>
        <a-menu-item class="menu_item_son" key="8">
          <i class="icon_title_son icon_m10"></i>
          我的信息
        </a-menu-item>

        <!-- <a-menu-item class="menu_item_son" v-if="memberType == 'CU'" key="9">
          <i class="icon_title_son icon_m12"></i>
          银行卡设置
        </a-menu-item> -->

        <a-menu-item class="menu_item_son" key="10">
          <i class="icon_title_son icon_m11"></i>
          安全设置
        </a-menu-item>
        <a-menu-item class="menu_item_son" key="100">
          <i class="icon_title_son icon_m11"></i>
          防伪信息设置
        </a-menu-item>
      </a-sub-menu>

      <!-- <a-sub-menu :disabled='subStatus' @titleClick='titleClick' v-if="memberType == 'BB'" key="sub4">
        <span slot="title" class="menu_item">
          <i class="icon_title icon_m4"></i>
          <span class="side_title">收单分账管理</span>
        </span>
        <a-menu-item class="menu_item_son" key="11">
          <i class="icon_title_son icon_m10"></i>
          分账名单审核查询
        </a-menu-item>
        <a-menu-item class="menu_item_son" key="12">
          <i class="icon_title_son icon_m12"></i>
          分账名单查询
        </a-menu-item>
        <a-menu-item class="menu_item_son" key="13">
          <i class="icon_title_son icon_m11"></i>
          收单分账查询
        </a-menu-item>
      </a-sub-menu> -->

      <!-- <a-sub-menu @titleClick="titleClick" key="sub10">
        <span slot="title" class="menu_item">
          <i class="icon_title icon_m4"></i>
          <span class="side_title">营销管理</span>
        </span>
        <a-menu-item class="menu_item_son" key="32">
          <i class="icon_title_son icon_m5"></i>
          分期扣款查询
        </a-menu-item>
        <a-menu-item class="menu_item_son" key="33">
          <i class="icon_title_son icon_m7"></i>
          已参与的活动
        </a-menu-item>
        <a-menu-item class="menu_item_son" key="34">
          <i class="icon_title_son icon_m7"></i>
          商户活动自定义
        </a-menu-item>
        <a-menu-item class="menu_item_son" key="35">
          <i class="icon_title_son icon_m7"></i>
          商户活动查询
        </a-menu-item>

        <a-menu-item class="menu_item_son" key="31">
          <i class="icon_title_son icon_m8"></i>
          限额查询
        </a-menu-item>
      </a-sub-menu> -->
    </a-menu>
  </div>
</template>
<script>
import { mapState, mapMutations, mapAction } from "vuex";
import Result from "@/components/result/Result";
import api from "@/common/api";
export default {
  components: {
    Result,
  },
  props: ["message"],
  data() {
    return {
      email: "",
      loading: false,
      rootSubmenuKeys: [
        "sub1",
        "sub2",
        "sub3",
        "sub4",
        "sub5",
        "sub6",
        "sub7",
        "sub8",
        "sub9",
        "sub10",
        "sub98",
        "sub11",
        "sub12"
      ],
      openKeys: [],
      subStatus: false,
      orgType: "",
      AgentType: "",
    };
  },
  computed: {
    // ...mapState({

    memberType: {
      get() {
        // state => state.memberType

        return this.$store.state.memberType;
      },
      set() {},
    },

    userType: {
      get: function () {
        let usertype = "";
        if (this.memberType == "CU") {
          usertype = "per";
        } else {
          usertype = "org";
        }
        return usertype;
      },
      set() {},
    },
  },
  created() {
    let localMemberType = localStorage.getItem("memberType");

    if (localMemberType) {
      this.$store.dispatch("changeType", localMemberType);
    }
    if (this.memberType == "CU") {
      this.userType = "per";

      // console.log("this.userType", this.userType);
    } else {
      this.userType = "org";

      // console.log("this.userType", this.userType);
    }
    this.AgentType = localStorage.getItem("AgentType");

    // console.log(this.AgentType)

    this.orgType = localStorage.getItem("orgType");
    if (this.orgType == "small") {
      this.orgType = "per";
    } else {
      this.orgType = "org";
    }
  },
  mounted() {},
  activated() {},
  methods: {
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        (key) => this.openKeys.indexOf(key) === -1
      );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    doNext(step) {
      var st = step + 1;
      this.$router.push("/OrgRegister/step" + st);
    },
    routerGo(e) {
      // console.log(e)

      let key = e.key;
      switch (key) {
        case "1":
          this.$router.push("/userindex");
          break;
        case "2":
          this.$router.push(`/org/transmanage/transquery`);
          break;
        case "3":
          this.$router.push("/org/transmanage/cashoutquery");
          break;
        case "4":
          this.$router.push(`/${this.userType}/transmanage/payquery`);
          break;
        case "5":
          this.$router.push(`/${this.userType}/transmanage/ratequery`);
          break;
        case "6":
          this.$router.push(`/${this.userType}/transmanage/quotaquery`);
          break;
        case "7":
          this.$router.push(`/${this.userType}/financemanage/financequery`);
          break;
        case "8":
          this.$router.push(`/${this.orgType}/accountmanage/myinfo`);
          break;
        case "9":
          this.$router.push("/per/accountmanage/perbankset");
          break;
        case "10":
          this.$router.push(`/${this.userType}/accountmanage/setting`);
          break;
        case "11":
          this.$router.push("/listStatusQuery");
          break;
        case "12":
          this.$router.push("/receiptListQuery");
          break;
        case "13":
          this.$router.push("/receiptSubLedgerQuery");
          break;
        case "14":
          this.$router.push("/transReportDownload");
          break;
        case "15":
          this.$router.push("/withdrawReportDownload");
          break;
        case "16":
          this.$router.push("/OrgRegister");
          // this.$router.push("/not/permisson")
          break;
        case "17":
          this.$router.push("/OrgRegister/orgAuditQuery");
          break;
        case "18":
          this.$router.push("/OrgRegister/orgInfoQuery");
          break;
        case "19":
          this.$router.push("/newTerminal");
          break;
        case "20":
          this.$router.push("/Terminal/terminalAuditQuery");
          break;
        case "21":
          this.$router.push("/Terminal/terminalInfoQuery");
          break;
        case "22":
          this.$router.push("/Terminal/terminalQuery");
          break;
        case "23":
          this.$router.push("/Terminal/terminalStorage");
          break;
        case "24":
          this.$router.push("/Terminal/terminalTransfer");
          break;
        case "25":
          this.$router.push("/Terminal/terminalCallback");
          break;
        case "26":
          this.$router.push("/PartnersRegister");
          break;
        case "27":
          this.$router.push("/Partners/PartnersAuditQuery");
          break;
        case "28":
          this.$router.push("/Partners/PartnersInfoQuery");
          break;
        case "29":
          this.$router.push("/org/transmanage/rateTemplate");
          break;
        case "30":
          this.$router.push("/org/transmanage/selfratequery");
          break;
        case "31":
          this.$router.push("/Terminal/SuperiorRecordQuery");
          break;
        case "32":
          this.$router.push("/marketing/payInstalmentsQuery");
          break;
        case "33":
          this.$router.push("/marketing/alreadyActivity");
          break;
        case "34":
          this.$router.push("/marketing/customActivity");
          break;
        case "35":
          this.$router.push("/marketing/ActivityQuery");
          break;
        case "36":
          this.$router.push("/transReportQuery");
          break;
        case "/activities/returnMoney":
          this.$router.push("/activities/returnMoney");
          break;

        case "/activities/returnMoneyDownload":
          this.$router.push("/activities/returnMoneyDownload");
          break;
        case "37":
          this.$router.push("/activities/activityDeductionQuery");
          break;
        case "38":
          this.$router.push("/activities/deductionDetailsDownload");
          break;
        case "39":
          this.$router.push("/riskManager/riskCutQuery");
          break;
        case "99":
          this.$router.push("/Partners/PartnersAdmin/step1");
          break;
        case "98":
          this.$router.push("/Partners/PartnersAdmin/step1");
          break;
        case "97":
          this.$router.push("/Partners/PartnersAdminAuditQuery");
          break;
        case "100":
          this.$router.push("/AntiCounterfeiting/Config");
          break;
      }
    },
    titleClick({ key, domEvent }) {
      if (key == "sub4") {
        if (sessionStorage.getItem("isverify") == "false") {
          const h = this.$createElement;
          var self = this;
          self.$info({
            title: "您还未有收单分账记录",
            content: h("div", {}, [h("p", "请先新增收单分账")]),
            okText: "去新增",
            onOk() {
              self.$router.push("/newReceipt");
            },
          });
        }
      } else {
      }
    },
  },
};
</script>
<style lang="less" scope>
.ant-layout-sider {
  background: #fafbff !important;
  color: #52506b;
}

.ant-menu-submenu,
.ant-menu-submenu-inline {
  margin-bottom: 8px;
}

.ant-menu-inline .ant-menu-submenu-title {
  padding: 0 16px;
  padding-left: 19% !important;
  text-align: left;
}

.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow,
.ant-menu-submenu-vertical-left
  > .ant-menu-submenu-title
  .ant-menu-submenu-arrow,
.ant-menu-submenu-vertical-right
  > .ant-menu-submenu-title
  .ant-menu-submenu-arrow,
.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow {
  position: absolute;
  top: 50%;
  right: 17%;
  width: 10px;
}

#slidebar {
  background: #fafbff;
  overflow: scroll;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

/*滚动条样式*/
#slidebar::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}

#slidebar::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

#slidebar::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

#slidebar .icon_title {
  width: 19px;
  height: 19px;
  background-size: 100% 100%;
  margin-right: 0.8vw;
}

.icon_m1 {
  background: url(../../../static/img/menu/m1.png) no-repeat;
}

.icon_m2 {
  background: url(../../../static/img/menu/m2.png) no-repeat;
}

.icon_m3 {
  background: url(../../../static/img/menu/m3.png) no-repeat;
}

.icon_m4 {
  background: url(../../../static/img/menu/m4.png) no-repeat;
}

.icon_m5 {
  background: url(../../../static/img/menu/m5.png) no-repeat;
}

.icon_m6 {
  background: url(../../../static/img/menu/m6.png) no-repeat;
}

.icon_m7 {
  background: url(../../../static/img/menu/m7.png) no-repeat;
}

.icon_m8 {
  background: url(../../../static/img/menu/m8.png) no-repeat;
}

.icon_m9 {
  background: url(../../../static/img/menu/m9.png) no-repeat;
}

.icon_m10 {
  background: url(../../../static/img/menu/m10.png) no-repeat;
}

.icon_m11 {
  background: url(../../../static/img/menu/m11.png) no-repeat;
}

.icon_m12 {
  background: url(../../../static/img/menu/m12.png) no-repeat;
}

#slidebar .icon_title_son {
  width: 17px;
  height: 17px;
  background-size: 100% 100%;
  margin-right: 15px;
}

.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background-color: #b3292c !important;
  color: #fff !important;

  .side_title {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
  }

  .icon_m1 {
    background: url(../../../static/img/menuactive/m1.png) no-repeat;
  }

  .icon_m5 {
    background: url(../../../static/img/menuactive/m5.png) no-repeat;
  }

  .icon_m6 {
    background: url(../../../static/img/menuactive/m6.png) no-repeat;
  }

  .icon_m7 {
    background: url(../../../static/img/menuactive/m7.png) no-repeat;
  }

  .icon_m8 {
    background: url(../../../static/img/menuactive/m8.png) no-repeat;
  }

  .icon_m9 {
    background: url(../../../static/img/menuactive/m9.png) no-repeat;
  }

  .icon_m10 {
    background: url(../../../static/img/menuactive/m10.png) no-repeat;
  }

  .icon_m11 {
    background: url(../../../static/img/menuactive/m11.png) no-repeat;
  }

  .icon_m12 {
    background: url(../../../static/img/menu/m12.png) no-repeat;
  }

  #slidebar .icon_title_son {
    width: 17px;
    height: 17px;
    background-size: 100% 100%;
    margin-right: 0.8vw;
  }

  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    background-color: #b3292c !important;
    color: #fff !important;

    .side_title {
      font-size: 16px;
      font-weight: 500;
      color: #fff;
    }

    .icon_m1 {
      background: url(../../../static/img/menuactive/m1.png) no-repeat;
    }

    .icon_m5 {
      background: url(../../../static/img/menuactive/m5.png) no-repeat;
    }

    .icon_m6 {
      background: url(../../../static/img/menuactive/m6.png) no-repeat;
    }

    .icon_m7 {
      background: url(../../../static/img/menuactive/m7.png) no-repeat;
    }

    .icon_m8 {
      background: url(../../../static/img/menuactive/m8.png) no-repeat;
    }

    .icon_m9 {
      background: url(../../../static/img/menuactive/m9.png) no-repeat;
    }

    .icon_m10 {
      background: url(../../../static/img/menuactive/m10.png) no-repeat;
    }

    .icon_m11 {
      background: url(../../../static/img/menuactive/m11.png) no-repeat;
    }

    .icon_m12 {
      background: url(../../../static/img/menuactive/m12.png) no-repeat;
    }
  }
}

.side_title {
  font-size: 16px;
  font-weight: 500;
  color: #52506b;
}

#slidebar .first_item {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  padding-left: 20% !important;
  text-align: left;
}

.menu_item {
  display: flex;
  align-items: center;
}

.menu_item_son {
  padding-left: 30% !important;
  display: flex;
  align-items: center;
  text-align: left;
}

.ant-menu-submenu > .ant-menu {
  background: #fafbff !important;
}

/deep/.ant-menu-vertical .ant-menu-item:not(:last-child),
.ant-menu-vertical-left .ant-menu-item:not(:last-child),
.ant-menu-vertical-right .ant-menu-item:not(:last-child),
.ant-menu-inline .ant-menu-item:not(:last-child) {
  margin-bottom: 0px;
}
</style>
